
<!DOCTYPE html>

<script src="../jquery-1.3.2.js"></script>
<script src="../../src/form/form.styleable.js"></script>


<!--{{{ STYLE -->

<style>
body {
	padding:100px;
	font-family:"bitstream vera sans";
}

.widget {
	background:transparent url(img/checkbox.png) no-repeat scroll 0 0;
	height:20px;	
	width:20px;
	cursor:pointer;
	padding:3px 8px;
}

.radio {
	background-image:url(img/radio.png);		
}

.widget.checked {
	background-position:0 -50px;	
}	

a.widget:active {
	background-position:0 -25px;	
}

a.widget:active {
	background-position:0 -75px;	
}

.select {
	background:transparent url(img/select.png) no-repeat scroll 0 0;
	color:#fff;
	height:21px;
	line-height:21px;
	overflow:hidden;
	position:absolute;
	width:158px;		
	padding:0 24px 0 8px;
}

select.my {
	opacity:0;
	position:relative;
	width:190px;
	z-index:5;		
}

.filewrap {
	background:url(img/button.png) no-repeat scroll 0 0;
	position:absolute;
	text-align:center;
	width:95px;		
	height:25px;
	font:normal 11px "bitstream vera sans";
	color:#fff;	
}

.filewrap input {		
	height:22px;		
	width:100px;
	margin-left:-100px;
	opacity:0;
}

.filewrap.hover {
	background-position:0 -26px;		
}

.filewrap.focus {
	background-position:0 -52px;		
}

.areawrap {
	border:1px solid #ccc;
	padding:4px;
	margin:20px 0;
	width:400px;
	min-height:25px;
}

div.textrarea {
	background-color:#fff;
	border:medium none;
	cursor:text;
	font-size:13px;
	margin:0;
	max-height:200px;
	min-height:20px;
	overflow-x:hidden;
	overflow-y:auto;
	padding:0px;	
	font-family:"bitstream vera sans";	
	outline:none;
}

</style>

<!--}}}-->



<script>
$(function() {
	$("form").styleable({
		inputClass: 'widget',
		fileWrapper: 'filewrap'		
	});	
});
</script>

<form>
	<select class="my" name="6">
		<option>This</option>
		<option>That</option>
		<option>These</option>
		<option>Those</option>
		<option>Theirs</option>
	</select>
	
	<p>
		<label><input type="checkbox" class="my" checked /> Something</label>
	</p>
	
	<p>
		<label><input type="radio" class="my" name="foo" /> Something else</label>
	</p>
	                                 
	<p>
		<input type="radio" class="my" name="foo" /> Something else
	</p>
	
	<p>
		<input type="file" name="image" class="file" title="Choose File" />
	</p>
	
	<p>
		<div class="passwordWrap">
			<span></span>
			<input type="password" class="password" />
		</div>
	</p>
	
	<p>
		<textarea rows="5">Jotain vain</textarea>
	</p>
	

            
</form>


